<template>
    <div class="shoplist">
        <ul>
            <li v-for="item in shoplist" :key="item.id">
                <img :src="item.src">
                <div>
                    <p>{{item.title}}</p>
                    <p>￥ {{item.price}}</p>
                    <p><button @click="add(item)">加入购物车</button></p>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default{
    name:"Product",
    //通过computed计算属性获取store中的数据
    // computed:{
    //     shoplist(){
    //         return this.$store.state.shoplist
    //     }
    // }
    computed:mapState(['shoplist']),
    methods:{
        add(item){
            // this.$store.commit('add',item);
            this.$store.dispatch('add',item);
        }
    }
}
</script>
<style scoped>
    .shoplist{
        width: 100%;
        padding-bottom: 50px;
    }
    li{
        position: relative;
        border-bottom: 1px dashed #ccc;
        padding: 5px;
    }
    li div{
        display: inline-block;
        position: absolute;
        top: 10px;
        width: 120px;
        line-height: 30px;
        font-size: 14px;
    }
    img{
        width: 100px;
        border: 1px solid #ccc;
        margin:10px 10px 8px 10px;
    }
    li div p:nth-child(2){
        color: #f00;
    }
    button{
        color: white;
        background: coral;
        border:none;
        padding: 5px;
    }
</style>
